<template>
	<view class="jzrxq">
		<!-- 头部 -->
		<view class="address_box">
			<view class="address_info_box">
				<view class="address_name font-323232 font14">{{dataobj.the_patient_info.name}}</view>
				<view class="address_mr" v-show="dataobj.isdefault == 1">默认</view>
			</view>
			<view class="address_address font-323232 font14">就诊卡:{{dataobj.the_patient_info&&dataobj.the_patient_info.code?dataobj.the_patient_info.code:'-'}}</view>
		</view>
		<!-- 就诊二维码 -->
		<view class="jzrxq_code">
			<view>
				<tki-barcode ref="barcode" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" onval
					:val="dataobj.the_patient_info.code" :load-make="true" :opations="barOpations" />
			</view>
		</view>
		<!-- 详情 -->
		<view class="payment_info">
			<view class="paymentinfo_box">
				<text>性别</text>
				<view>{{dataobj.the_patient_info.sex==1?'男':'女'}}</view>
			</view>
			<view class="paymentinfo_box">
				<text>出生日期</text>
				<view>{{dataobj.the_patient_info.birthday}}</view>
			</view>
			<view class="paymentinfo_box">
				<text>身份证</text>
				<view>{{dataobj.the_patient_info.card}}</view>
			</view>
			<view class="paymentinfo_box">
				<text>手机号</text>
				<view>{{dataobj.the_patient_info.mobile}}</view>
			</view>
			<view class="paymentinfo_box">
				<text>地址</text>
				<view>{{dataobj.the_patient_info.addr}}</view>
			</view>
			<!-- 默认就诊人 -->
			<view class="jzrxq_mr">
				<text>设置成默认就诊人</text>
				<switch color="#6ccbb6" style="transform: scale(.9,.9)"
					:checked="dataobj.isdefault == 1" @change="changeIndicatorDots" />
				<!-- <van-switch checked="{{ checked }}" active-color="#6ccbb6" size="26px" bind:change="onChange" /> -->
			</view>
		</view>
		<!-- 删除就诊人 -->
		<view class="custom_class" @click="Ondelfamily">删除就诊人</view>
	</view>
</template>

<script>
	import tkiBarcode from '@/components/tki-barcode/tki-barcode'
	export default {
		components: {
			tkiBarcode
		},
		onLoad: function(options) {
			this.id = options.id
			//获取详情
			this.Oninfo()
			this.canvasWidth = uni.upx2px(600);
			this.canvasHeight = uni.upx2px(140);
		},
		data() {
			return {
				id: null,
				indicatoractivecolor: '#6ccbb6',
				//信息
				dataobj: {},
				//掉线码参数
				barOpations: {
					width: 8
				},
				canvasWidth: 0,
				canvasHeight: 0
			}
		},
		methods: {
			//详情
			Oninfo() {
				this.$Http({
					url: 'detailsThePatient',
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						let idCard = res.data.the_patient_info.id_card.toString()
						let mobile = res.data.the_patient_info.mobile.toString()
						this.dataobj = res.data
						//打星号
						if (idCard.length == 15) {
							this.dataobj.the_patient_info.card = idCard.slice(0, 4) + '*********' + idCard.slice(
								13)
						} else if (idCard.length == 18) {
							this.dataobj.the_patient_info.card = idCard.slice(0, 4) + '************' + idCard
								.slice(16)
						}
						// this.dataobj.birthday = this.dataobj.birthday.replace(/(.{4})(.{2})/, "$1-$2-");
						//手机号打星号
						this.dataobj.the_patient_info.mobile = mobile.slice(0, 3) + '****' + mobile.slice(7)
					}
				})
			},
			//设置默认就诊人
			changeIndicatorDots(e) {
				console.log(e, '看看')
				this.$Http({
					url: 'setDefaultThePatient',
					type: 'POST',
					show: true,
					data: {
						isdefault: e.detail.value ? 1 : 0,
						id: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						this.Oninfo()
					}
				})
			},
			//删除就诊人
			Ondelfamily() {
				let that = this
				uni.showModal({
					title: '操作提示',
					confirmText: '确认',
					confirmColor: '#b8875c',
					cancelText: '取消',
					content: '确认删除就诊人',
					success: function(res) {
						if (res.confirm) {
							that.$Http({
								url: 'delThePatient',
								data: {
									id: that.id
								},
								show: true,
								type: 'POST'
							}).then(res => {
								if (res.code == 1) {
									// uni.redirectTo({
									// 	url: '/pagesA/my/jzrgl',
									// })
									uni.navigateBack()
								}
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* 头部 */
	.address_box {
		padding: 45rpx 0rpx 45rpx 30rpx;
		margin: 20rpx 35rpx;
		width: 680rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 50rpx 0px rgba(213, 213, 213, 0.5);
	}

	.address_info_box {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.address_name {
		width: 88rpx;
	}

	.address_mr {
		width: 70rpx;
		height: 30rpx;
		background-color: #6ccbb6;
		border-radius: 5rpx;
		font-size: 20rpx;
		color: #ffffff;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.address_address {
		padding-right: 45rpx;
	}

	/* 就诊二维码 */
	.jzrxq_code {
		padding: 20rpx 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jzrxq_barcode {
		width: 600rpx;
		height: 140rpx;
	}

	.jzrxq_code view {
		/* 		height: 140rpx;
		width: 600rpx;
		border: 1rpx #57d6bb solid; */
	}

	/* 详情 */
	.payment_info {
		padding: 45rpx 30rpx 45rpx 30rpx;
		margin: 30rpx 35rpx;
		width: 680rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 50rpx 0px rgba(213, 213, 213, 0.5);
	}

	.paymentinfo_box {
		display: flex;
		width: 620rpx;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.paymentinfo_box text {
		color: #878787;
	}

	.paymentinfo_box view {
		color: #242424;
	}


	/* 默认就诊人 */
	.jzrxq_mr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #323232;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx #eeeeee solid;
		/* height: 100rpx; */
	}

	/* 删除就诊人 */
	.custom_class {
		width: 655rpx !important;
		height: 85rpx !important;
		background-color: #6ccbb6 !important;
		border-radius: 5rpx !important;
		position: fixed !important;
		bottom: 100rpx;
		left: 46rpx;
		font-size: 30rpx !important;
		color: #fefefe !important;
		line-height: 85rpx !important;
		text-align: center !important;
	}

	.custom_class:active {
		background-color: #57d6bb !important;
	}

	.nodata {
		margin: 0 35rpx;
		width: 680rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #323232;
	}

	.aaa {
		background-color: red;
	}
</style>
